import React, { useState, useRef, useEffect } from "react";
import * as echarts from "echarts";
import axios from "axios";

export default () => {
  const ref = useRef();
  const [areaData, setAreaData] = useState([
    { name: "北京市", value: 100 }, { name: "天津市", value: Math.round(Math.random() * 500) },
    { name: "上海市", value: Math.round(Math.random() * 500) }, { name: "重庆市", value: Math.round(Math.random() * 500) },
    { name: "河北省", value: Math.round(Math.random() * 500) }, { name: "河南省", value: Math.round(Math.random() * 500) },
    { name: "云南省", value: Math.round(Math.random() * 500) }, { name: "辽宁省", value: Math.round(Math.random() * 500) },
    { name: "黑龙江省", value: Math.round(Math.random() * 500) }, { name: "湖南省", value: Math.round(Math.random() * 500) },
    { name: "安徽省", value: Math.round(Math.random() * 500) }, { name: "山东省", value: Math.round(Math.random() * 500) },
    { name: "新疆维吾尔自治区", value: Math.round(Math.random() * 500) }, { name: "江苏省", value: Math.round(Math.random() * 500) },
    { name: "浙江省", value: Math.round(Math.random() * 500) }, { name: "江西省", value: Math.round(Math.random() * 500) },
    { name: "湖北省", value: Math.round(Math.random() * 500) }, { name: "广西壮族自治区", value: Math.round(Math.random() * 500) },
    { name: "甘肃省", value: Math.round(Math.random() * 500) }, { name: "山西省", value: Math.round(Math.random() * 500) },
    { name: "内蒙古自治区", value: Math.round(Math.random() * 500) }, { name: "陕西省", value: Math.round(Math.random() * 500) },
    { name: "吉林省", value: Math.round(Math.random() * 500) }, { name: "福建省", value: Math.round(Math.random() * 500) },
    { name: "贵州省", value: Math.round(Math.random() * 500) }, { name: "广东省", value: Math.round(Math.random() * 500) },
    { name: "青海省", value: Math.round(Math.random() * 500) }, { name: "西藏自治区", value: Math.round(Math.random() * 500) },
    { name: "四川省", value: Math.round(Math.random() * 500) }, { name: "宁夏回族自治区", value: Math.round(Math.random() * 500) },
    { name: "海南省", value: Math.round(Math.random() * 500) }, { name: "台湾省", value: Math.round(Math.random() * 500) },
    { name: "香港特别行政区", value: Math.round(Math.random() * 500) }, { name: "澳门特别行政区", value: Math.round(Math.random() * 500) },
    { name: "南海诸岛", value: Math.round(Math.random() * 500) },
  ]);
  const init = () => {
    console.log("arreData", areaData);
    axios.get("https://clcdn.253.com/owg/file/100000_full.json").then((res) => {
      console.log("data", res.data);
      const coord = res.data.features.map((e, index) => {
        return {
          name: e.properties.name,
          value: e.properties.center,
        };
      });
      console.log("coord", coord);
      let nanhai = {
        name: "南海诸岛",
        value: [121.889750, 36.941530],
      };
      coord.push(nanhai);
      const lines_coord = [];
      coord.forEach((e, index) => {
        if (e.value == null) {
          console.log("lines_coord_e", e);
        }
        index > 0 && e.value && lines_coord.push({ coords: [e.value, coord[0].value] });
      });
      console.log("lines", lines_coord);
      echarts.registerMap("china", res.data);//注册地图
      const chart = echarts.init(ref.current); //图表实例
      const option = {
        // title: {
        //   text: "中国地图",
        // },
        tooltip: {
          trigger: "item",
        },
        visualMap: [{
          min: 0,
          max: 500,
          left: "left",
          top: "bottom",
          text: ["高", "低"],
          inRange: {
            color: ["#e0ffff", "#006edd"],
          },
          show: true,
          seriesIndex: 0,
        }],
        // visualMap: {
        //   show: false,
        //   x: "left",
        //   y: "center",

        //   splitList: [
        //     { start: 500, end: 600 }, { start: 400, end: 500 },
        //     { start: 300, end: 400 }, { start: 200, end: 300 },
        //     { start: 100, end: 200 }, { start: 0, end: 100 },
        //   ],
        //   color: ["#5475f5", "#9feaa5", "#85daef", "#74e2ca", "#e6ac53", "#9fb5ea"],
        // },
        geo: {
          map: "china",
          zlevel: 10,
          show: true,
          layoutCenter: ["50%", "50%"],
          roam: false,
          layoutSize: "95%",
          zoom: 1,
          label: {
            normal: {
              show: false,
              textStyle: {
                fontSize: 12,
                color: "#43D0D6",
              },
            },
          },
          itemStyle: {
            normal: {
              // color: "#062031",
              borderWidth: 1.1,
              borderColor: "#ccc",
            },
          },
          emphasis: {
            areaColor: "#FFB800",
            label: {
              show: false,
            },
          },

        },
        series: [
          {
            name: "北京东奥",
            type: "map",
            mapType: "china",
            roam: true,
            label: {
              normal: {
                show: true, //省份名称
              },
              emphasis: {
                show: false,
              },
            },
            geoIndex: 0,
            data: areaData, //数据
            tooltip: {
              trigger: "item",
              formatter: "北京冬奥会<br/> {b}:{c} 人",
            },
          },
          {
            type: "effectScatter",
            coordinateSystem: "geo",
            zlevel: 15,
            symbolSize: 8,
            rippleEffect: {
              period: 4, brushType: "stroke", scale: 4,
            },
            itemStyle: {
              color: "#FFB800",
              opacity: 1,
            },
            data: coord.slice(1),
          },
          {
            type: "effectScatter",
            coordinateSystem: "geo",
            zlevel: 15,
            symbolSize: 12,
            rippleEffect: {
              period: 6, brushType: "stroke", scale: 8,
            },
            itemStyle: {
              color: "#FF5722",
              opacity: 1,
            },
            data: coord.slice(0, 1),
          },
          {
            type: "lines",
            coordinateSystem: "geo",
            zlevel: 15,
            tooltip: {
              show: false,
            },
            effect: {
              show: true, period: 5, trailLength: 0, symbol: "arrow", color: "#01AAED", symbolSize: 8,
            },
            lineStyle: {
              width: 1.8, opacity: 0.6, curveness: 0.5, color: "#FFB800",
            },
            data: lines_coord,
          },

        ],
      };
      let optionMap = {
        backgroundColor: "#FFFFFF",
        title: {
          text: "全国地图大数据",
          subtext: "",
          x: "center",
        },
        tooltip: {
          trigger: "item",
          formatter: "{c}",
        },

        //左侧小导航图标
        visualMap: {
          show: true,
          x: "left",
          y: "center",
          splitList: [
            { start: 500, end: 600 }, { start: 400, end: 500 },
            { start: 300, end: 400 }, { start: 200, end: 300 },
            { start: 100, end: 200 }, { start: 0, end: 100 },
          ],
          color: ["#5475f5", "#9feaa5", "#85daef", "#74e2ca", "#e6ac53", "#9fb5ea"],
        },

        //配置属性
        series: [{
          name: "数据",
          type: "map",
          mapType: "china",
          roam: true,
          label: {
            normal: {
              show: true, //省份名称
            },
            emphasis: {
              show: false,
            },
          },
          data: areaData, //数据
        }],
      };
      chart.setOption(option);
      // chart.setOption(optionMap);
    });
  };
  useEffect(() => {
    init();
  }, []);
  return (
    <div style={{ width: "100%", height: "100%" }} ref={ref}></div>
  );
};
